import axios from "axios";
import React, { useState } from "react";
import { Checkbox, Button } from "react-vant";
const list = [
  {
    id: Math.random().toString().slice(2),
    price: 4444.0,
    desc: "立即还款",
  },
  {
    id: Math.random().toString().slice(2),
    price: 444.0,
    desc: "最低还款, 先换一点， 剩下随时换",
  },
  {
    id: Math.random().toString().slice(2),
    price: 740.0,
    desc: " 6期分期,每期740, 息 10",
  },
];
const Index: React.FC = () => {
  const [data, setData] = useState(list[0]);

  const pay = async () => {
    const resp = await axios.post("/api/pay", data);
    window.location.href = resp.data.data;
  };
  return (
    <div>
      <div>
        {list.map((v) => {
          return (
            <div key={v.id} className="pay-item" onClick={() => setData(v)}>
              <Checkbox checked={v.id === data.id}></Checkbox>
              <div>
                <div>{v.desc}</div>
                <div>{v.price}</div>
              </div>
            </div>
          );
        })}
      </div>
      <Button type="primary" block onClick={pay}>
        立即付款
      </Button>
    </div>
  );
};

export default Index;
